<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8" />
        <title>01_复习</title>

        <style>
            input {
                outline: none;
                width: 20px;
                text-align: center;
            }
        </style>
    </head>
    <body>

        <button class="sub">-</button>
        <input type="text" value="1">
        <button class="plus">+</button><br>

        <button class="sub">-</button>
        <input type="text" value="1">
        <button class="plus">+</button><br>


        <button class="sub">-</button>
        <input type="text" value="1">
        <button class="plus">+</button><br>


        <button class="sub">-</button>
        <input type="text" value="1">
        <button class="plus">+</button><br>






        <!-- <button>咋起啊</button> -->
        <!-- <ul></ul> -->

        <script>

            var plus_list = document.querySelectorAll('.plus');

            for(var i = 0; i < plus_list.length; i++){
                plus_list[i].onclick = function(){
                    this.previousElementSibling.value++;
                }
            }

            var sub_list = document.querySelectorAll('.sub');

            for(var i = 0; i < sub_list.length; i++){
                sub_list[i].onclick = function(){
                    var n = this.nextElementSibling.value;
                    if(n > 1){
                        n--;
                    }
                    this.nextElementSibling.value = n;
                }
            }






















            // var btn = document.querySelector('button');

            // btn.onclick = function(){
            //     // document.body.innerHTML += '<h1>帅博今天来的最早</h1>';
            //     document.body.innerHTML = document.body.innerHTML + '<h1>帅博今天来的最早</h1>';
            // }

            // var btn = document.querySelector('button');
            // var ul = document.querySelector('ul');

            // btn.onclick = function(){
            //     var li = document.createElement('li');
            //     li.innerHTML = '明天自习真不开心';

            //     ul.append(li);
            // }


            // var arr = ['zs','ls','ww'];

            // var str = '';
            // for(var i = 0; i < arr.length; i++){
            //     str += '<li>' + arr[i] + '</li>';
            // }

            // var ul = document.querySelector('ul');
            // ul.innerHTML = str;


            // var arr = [1,2,3,4];

            // var ul = document.createElement('ul');

            // for(var i = 0; i < arr.length; i++){
            //     var li = document.createElement('li');
            //     li.innerHTML = arr[i];

            //     ul.append(li);
            // }

            // document.body.append(ul);





        </script>
    </body>
</html>